<template>
  <div>
    hellw world
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="防抖:">
          <el-input
            v-model="form.value"
            v-popover:popover
            @input="Antishake"
          ></el-input>
        </el-form-item>
        <el-form-item label="节流:">
          <el-input
            v-popover:popr
            @input="throttle"
            v-model="form.str"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-popover
      ref="popover"
      placement="bottom"
      title="下面是防抖内容哦："
      width="300"
      trigger="focus"
      :content="value"
    >
    </el-popover>
    <el-popover
      ref="popr"
      placement="bottom"
      title="下面是节流内容哦："
      width="300"
      trigger="focus"
      :content="throttleValue"
    >
    </el-popover>
  </div>
</template>

<script>
import { antiShake, isThrottle } from '@/components/ast.js'
export default {
  data() {
    return {
      form: {
        value: '', //防抖
        str: '' //节流
      },
      value: '', //防抖内容
      throttleValue: '' //节流内容
    }
  },
  computed: {},
  methods: {
    Antishake: antiShake(function () {
      //引入防抖
      console.log(this.form.value)
      this.value = this.form.value
    }, 1000),

    throttle: isThrottle(function () {
      //引入节流
      this.throttleValue = this.form.str
    }, 1000)
  }
}
</script>

<style>
.el-input {
  width: 300px;
}
</style>